<template>
	<view>
		<view class="search-box">	<my-search @myclick="goSearch"></my-search></view>
		<!-- 轮播图的区域 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(item,i) in swiperList" :key="i">
				<navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id">
					<img :src="item.image_src" alt="">
				</navigator>
			</swiper-item>
		</swiper>
		<!-- 分类导航区域 -->
		<view class="nav-list">
			 <view class="imge" v-for="(item, i) in navList" :key="i" @click="navClick(item)">
				 <image :src="item.image_src" class="imgess"></image>
		
			 </view>
			
		</view>
		<!-- 楼层区域 -->
		<!-- 楼层的容器 -->
		<view class="floor-list">
			<!-- 楼层的item项 -->
			<view src="floor-item" v-for="(item,i) in floorList" :key="i">
				<!-- 楼层 的标题 -->
				<image :src="item.floor_title.image_src" class="floor-title"></image>
				<!-- 楼层 的图片 -->
				 <view class="floor-img-box" >
					 <!-- 左侧图片 -->
					 <navigator class="floor-img-left" :url="item.product_list[0].url">
						 <image :src="item.product_list[0].image_src" :style="{width:item.product_list[0].image_width+'rpx'}" mode="widthFix"></image>
					 </navigator>
					 <!-- 右侧图片 -->
					 <view class="floor-img-right">
					 <navigator class="right-img-item" v-for="(itemm,ii) in item.product_list" :key="ii" v-if="ii!=0" :url="itemm.url" >
						 <image :src="itemm.image_src" :style="{width:itemm.image_width+'rpx'}" mode="widthFix"></image>
					 </navigator> 
					 
				 </view>
			</view>
		</view>
	</view>
	 </view>
</template>

<script>
	import badgeMix from '@/mixins/tabber-badge.js'
	export default {
		mixins:[badgeMix],
		data() {
			return {
				//轮播图的数据列表
				swiperList:[],
				// 分类导航的数据列表
				navList:[],
				// 楼层的数据
				floorList:[]
			};
		},
		onLoad() {
			// 调用方法
			this.getSwiperList()
			this.getNavList()
			this.getFloorList()
		},
		methods: {
			// 调用轮播图
	   	async	getSwiperList() {
	  	const {data:res} =	await	uni.$http.get('/api/public/v1/home/swiperdata')
			// console.log('ssss',res)
			// 请求失败
			if(res.meta.status !== 200)	return uni.$showMsg()
			this.swiperList=res.message
			// uni.$showMsg('数据请求成功')
			},
			// 调用分类导航
	  	async	getNavList(){
			const {data:res}=await	uni.$http.get('/api/public/v1/home/catitems')
			if(res.meta.status!==200) return uni.$showMsg()
				// console.log('dddd',res)
				this.navList=res.message
			},
			//点击分页导航
			navClick(item){
				// console.log(item.title)
				if(item.name=='分类'){
					// 跳转页面
					uni.switchTab({
						url:"/pages/cate/cate"
					})
				}
			},
			//获取首页楼层数据
		   async	getFloorList(){
			const {data:res} = await uni.$http.get('/api/public/v1/home/floordata')
			if(res.meta.status!==200) return uni.$showMsg()
			// console.log('ffff',res)
			
			// 对数据进行处理
			res.message.forEach(floor=>{
				floor.product_list.forEach(prod=>{
					prod.url='/subpkg/goods_list/goods_list?'+prod.navigator_url.split('?')[1]
				})
			})
			
			this.floorList=res.message
			},
			// 搜索触发的事件
			goSearch(){
				// console.log('ok')
				uni.navigateTo({
					url:'/subpkg/search/search'
				})
			}
		},
	}
</script>

<style lang="scss">
	// 轮播图样式
swiper{
	height: 330rpx;
	.swiper-item,
	image{
		width: 99.8%;
		height: 100%;
		z-index: 0;
	}
	}
	// 导航样式
	.nav-list{
		display: flex; 
		justify-content: space-around;
		margin: 15px 0;
  .imgess{
	width: 128rpx;
	height: 140rpx;

	}
}
// 楼层标题
.floor-title{
	width: 100%;
	height: 60rpx;
}
.floor-img-right{
	display: flex;
	flex-wrap: wrap;
	justify-content:space-around
}
.floor-img-box{
	display: flex;
	// flex-wrap: wrap;
	padding-left: 10rpx;
}
.search-box{
	// 设置定位效果为吸顶
	position: sticky;
	// 吸顶的位置
	top: 0;
	z-index: 2;
}
</style>



